<template>
  <div class="concat">
    <div class="slider-img-div" :class="{'sliderImgRest':imgRest}" ref="sliderImgRef">
      <img id="slider-img" src="" alt/>
    </div>
    <div class="bg-img-div" ref="bgImgRef">
    </div>
  </div>
</template>
<script setup name="concat">
import {computed, ref} from "vue";
import useSlideVerifyStore from "@/stores/modules/slideVerify.js";

const moveX = computed(() => useSlideVerifyStore().moveX);
const captcha = computed(() => useSlideVerifyStore().captcha);
const imgRest = computed(() => useSlideVerifyStore().imgRest);

const bgImgRef = ref();
const sliderImgRef = ref();

function refresh() {
  bgImgRef.value.style.backgroundImage = "url(" + captcha.value.backgroundImage + ")";
  sliderImgRef.value.style.backgroundImage = "url(" + captcha.value.backgroundImage + ")";
  sliderImgRef.value.style.backgroundPosition = "0px 0px";
  var backgroundImageHeight = captcha.value.backgroundImageHeight;
  var height = ((backgroundImageHeight - captcha.value.data) / backgroundImageHeight) * bgImgRef.value.height;
  sliderImgRef.value.style.height=height;
  useSlideVerifyStore().initConfig(bgImgRef.value.width, bgImgRef.value.height, sliderImgRef.value.width, sliderImgRef.value.height, 206);
}

//暴露refresh方法
defineExpose({
  refresh
});

</script>
<style scoped>
.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
  background-size: 100% 159px;
  background-image: none;
  background-position: 0 0;
  z-index: 0;

}

.sliderImgRest {
  transform: translate(0px, 0px);
}

.slider-img-div {
  height: 100%;
  width: 100%;
  background-size: 100% 159px;
  position: absolute;
  transform: translate(v-bind(moveX+ "px"), 0px);
  /*border-bottom: 1px solid blue;*/
  z-index: 1;
}

.bg-img-div img {
  width: 100%;
}

.slider-img-div img {
  height: 100%;
}

</style>
